<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 对象的扩展运算符
        // 对象的属性值的拷贝，浅拷贝
        // let obj1 = {a:1,b:2,c:3};
        // let obj2 = {...obj1};//{a:1,b:2,c:3}
        // obj1.a = 100;
        // console.log(obj1,obj2);

        let obj1 = {a:1,b:2,c:3,d:{num:10}};

        let obj2 = {...obj1};//{a:1,b:2,c:3,d:{num:10}}
        obj1.d.num = 99;
        console.log(obj1,obj2);


        // 对象的合并
        let obj3 = {e:10,f:20,g:30};
        let obj4 = {...obj1,...obj3};
        console.log(obj4);

        let obj5 = {...obj1,...obj2};
        console.log(obj5);

        // 3. 对一个对象中的属性值的替代
        let obj6 = {name:'jack', age: 20, girlfriend: 'rose', money: 300000};

        let obj7 = {...obj6, name: 'laozhang'};

        console.log(obj7);

         // 请注意  对象的扩展运算符（ES6 专门针对对象的语法） 和 数组的扩展运算符（基于可迭代对象的） 机制是不一样的 

         let obj8 = {...[1,2,3,4,5,6]};
         console.log(obj8);
         
         // 对象的属性： 可遍历（枚举）属性 / 不可遍历（枚举）的属性
        console.log([1,2,3,4,5,6,7,8]);

        // 对象的  扩展运算符  和  解构赋值的 配合使用
        let {num4, num2, ...obj9  } =  {num1: 100, num2: 200, num3: 500, num4: 600};
        console.log(obj9);  // {num1: 100, num3: 500}

        let user = {username:'admin', password: '123456', gender: 'm'};

        let {password, ..._user} = user;
        console.log(_user);


    </script>
</body>
</html>